/*
* @Author: sc
* @Date:   2019-01-11 21:19:14
* @Last Modified by:   sc
* @Last Modified time: 2019-01-22 20:12:49
*/

import React from 'react';
import { Input, Tag, Divider, Pagination } from 'antd';
import {inject, observer } from 'mobx-react';

const Search = Input.Search;

import EditableTable from 'component/table/index.jsx'
import './index.css'

@inject('store')
@observer
class Todo extends React.Component {
  	constructor(props) {
    	super(props);
 	}
	handleSearch(value){
		this.props.store.setSearchInfo(value);
	}
  	render() {
  		let headers = [{
      		title: '序号',
      		dataIndex: 'id',
    	}, {
	      title: '内容',
	      dataIndex: 'info',
	      width: '30%',
	      editable: true,
	    }, {
	      title: '创建时间',
	      dataIndex: 'created',
	    },{
	      title: '完成时间',
	      dataIndex: 'finished',
	    },{
	      title: '状态',
	      dataIndex: 'status',
	    }];

    let dataSource = this.props.store.todoIDs.map((id, idIndex) => {
    	return Object.assign( {key : id}, this.props.store.todos[id].content);
    });
    return (
    	<div className="todo">
    		<div className="todo-top">
    			<div className="todo-title">TODO</div>
				<Search
					className="todo-search"
					placeholder="请输入搜索内容"
					onSearch={value => this.handleSearch(value)}
					enterButton
			    />
			    <div className="todo-tag">
			    	<Tag color="blue">Total:{this.props.store.total_tips}</Tag>
			    	<Tag color="orange">Finish:{this.props.store.finish_tips}</Tag>
					<Tag color="red">Left:{this.props.store.left_tips}</Tag>
			    </div>
		    </div>
		    <Divider className="todo-divider"></Divider>
		    <EditableTable headers={headers} dataSource={dataSource}/>
		    
    	</div>

    );
  }
}

export default Todo;